<%@page pageEncoding="UTF-8"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles" %>
<%@ taglib prefix="s" uri="/struts-tags" %> 
<%@ taglib prefix="sx" uri="/struts-dojo-tags" %>

<sx:head cache="false" parseContent="true"/>
<link type="text/css" rel="stylesheet" href="css/standard.css" media="screen">
<link type="text/css" rel="stylesheet" href="css/common.css" media="screen">
<link type="text/css" rel="stylesheet" href="css/reserve.css" media="screen">
<link type="text/css" rel="stylesheet" href="js/yui/assets/skins/sam/calendar.css" media="screen">
<style type='text/css'>
<!--
	.td-topic{
		padding-left: 9px;
		background-color: #EEEEEE;
	}
-->
</style>

<script language="javascript" type="text/javascript" src="js/datevalidate.js"></script>
<script language="javascript" type="text/javascript" src="js/CommonReserve.js"></script>
<script language="javascript" type="text/javascript" src="js/AjaxHandlerUtil.js"></script>
<script language="javascript" type="text/javascript" src="js/NumberFormat154.js"></script>
<script language="javascript" type="text/javascript" src="js/ReserveDetail.js"></script>

<sx:div id="reserveDetailDIV" loadingText="Loading..." showLoadingText="true"
		cssStyle="padding-top: 3px; background-image: url(images/top_page_bg.jpg); background-repeat: repeat-x;"
    	parseContent="true" separateScripts="true" executeScripts="true" refreshOnShow="true" cssClass="yui-skin-sam">
    	
    <s:form id="frmReserveDetail" name="frmReserveDetail" method="post" theme="simple">
  	<s:token/>
        <table cellpadding="0" cellspacing="0" border="0" width="100%" align="center">
            <tr>
                <td valign="top" width="100%">
                    <table cellpadding="0" cellspacing="0" border="0" width="97%" align="center">
                        <tr> 
                            <td colspan="2" height="20">
                                <s:actionerror />
                                <s:actionmessage cssStyle="font: bolder;color: blue;" />
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2" height="30" style="color: #FFFFFF; padding-left: 12px">
                            	<s:label key="reserve.room.detail.group" /> : &nbsp; &nbsp;
                                <s:property value="reserveDetailVO.groupInfoVO.groupName"/>
                                
                            	<s:hidden id="groupId" name="reserveDetailVO.groupInfoVO.groupId" />
                                <s:hidden id="groupName" name="reserveDetailVO.groupInfoVO.groupName" />
                                <s:hidden id="groupCode" name="reserveDetailVO.groupInfoVO.groupCode" />
                            </td>
                        </tr>
                        <tr bgcolor="#FFFFFF">
                        	<td valign="top" width="55%" style="padding: 5px">
                        		<table width="95%" cellspacing="1" cellpadding="3" bgcolor="#AAAAAA">
		                        <tr bgcolor="#FFFFFF">
		                        	<td class="td-topic"><s:label key="reserve.room.detail.no" /></td>
		                        	<td colspan="3">
		                        		<s:textfield name="reserveDetailVO.serviceDetailLine" cssStyle="border: 0px solid #FFFFFF" readonly="true" size="10"/>
		                        	</td>
		                        </tr>
		                        <tr bgcolor="#FFFFFF">
		                        	<td class="td-topic"><s:label key="reserve.room.detail.customer" /></td>
		                        	<td colspan="3">
		                        		<s:hidden id="customerId" name="reserveDetailVO.customerId" />
		                        		<sx:autocompleter id="customerAuto" name="reserveDetailVO.customerName" list="customerList" listValue="customerName" listKey="customerId" 
		                        						  indicator="customerIndicator" valueNotifyTopics="/afterLookupCustomer" /> &nbsp;
		                        		<img alt="Add New Customer" src="${pageContext.request.contextPath}/images/hidelist.jpg" width="20" height="20" style="cursor:hand;" onclick="gotoNewCustomerPopup();"/>
		                        		<img alt="Edit Customer" src="${pageContext.request.contextPath}/images/pen_icon.jpg" width="20" height="20" style="cursor:hand;" onclick="gotoEditCustomerPopup();"/>
										<img id="customerIndicator" src="${pageContext.request.contextPath}/images/indicator.gif" alt="Loading..." style="display:none"/>
		                        		<s:textfield id="customerCode" name="reserveDetailVO.customerCode" cssStyle="border: 0px solid #FFFFFF" readonly="true" size="5"/>			                        	
		                        	</td>
		                        </tr>
		                        <tr bgcolor="#FFFFFF">
									<td width="" class="td-topic"><s:label key="reserve.room.detail.telephone" /></td>
		                        	<td>
		                        		<s:textfield id="telephone" name="reserveDetailVO.phoneNum" cssStyle="border: 0px solid #FFFFFF" readonly="true" size="10"/>
		                        	</td>
		                        	<td class="td-topic"><s:label key="reserve.room.detail.mobile" /></td>
		                        	<td>
		                        		<s:textfield id="mobile" name="reserveDetailVO.mobileNum" cssStyle="border: 0px solid #FFFFFF" readonly="true" size="10"/>
		                        	</td>
		                        </tr>
		                        <tr bgcolor="#FFFFFF">
		                        	<td class="td-topic"><s:label key="reserve.room.detail.email" /></td>
		                        	<td colspan="3">
		                        		<s:textfield id="email" name="reserveDetailVO.email" cssStyle="border: 0px solid #FFFFFF" readonly="true" size="10"/>
		                        	</td>
		                        </tr>
		                        <tr bgcolor="#FFFFFF">
		                        	<td class="td-topic"><s:label key="reserve.room.detail.datefrom" /><font color="red">*</font></td>
		                        	<td>
		                        		<nobr>
		                        		<s:textfield id="serviceDetailStartDate" name="reserveDetailVO.serviceStartDate" cssClass="iNL" readonly="true" size="10" onchange="validateDetailDateFrom(this)"/>
		                        		<s:label key="reserve.room.detail.dateto" />
		                        		<s:textfield id="serviceDetailEndDate" name="reserveDetailVO.serviceEndDate" cssClass="iNL" readonly="true" size="10" onchange="validateDetailDateTo(this)"/>
		                        		</nobr>
		                        	</td>
		                        	<td class="td-topic"><s:label key="reserve.room.detail.day" /></td>
		                        	<td>
		                        		<s:textfield id="day" name="reserveDetailVO.day" cssStyle="border: 0px solid #FFFFFF" readonly="true" size="10"/>
		                        	</td>
		                        </tr>
		                        <tr bgcolor="#FFFFFF">
		                        	<td class="td-topic"><s:label key="reserve.room.detail.typeofroom" /><font color="red">*</font></td>
		                        	<td>
										<s:select id="typeOfRoomId" name="reserveDetailVO.typeOfRoomId" list="%{typeOfRoomList}" listKey="key" listValue="value" headerKey="0" headerValue="All" onchange="validateDetailTypeOfRoom();"/>			                        		
										<s:hidden id="typeOfRoom" name="reserveDetailVO.typeOfRoom" />			                        		
		                        	</td>
		                        	<td class="td-topic"><s:label key="reserve.room.detail.roomno" /><font color="red">*</font></td>
		                        	<td>
										<s:select id="roomNo" name="reserveDetailVO.roomNo" value="reserveDetailVO.roomId" list="%{roomList}" listKey="key" listValue="value" onchange="validateDetailRoomNo();"/>			                        		
		                        	</td>
		                        </tr>
		                        <tr bgcolor="#FFFFFF">
		                        	<td class="td-topic"><s:label key="reserve.room.detail.rateroom" /><font color="red">*</font></td>
		                        	<td>
		                        		<s:textfield id="ratePerRoom" name="reserveDetailVO.ratePerRoom" cssClass="iNR" size="10" maxlength="11" onchange="validateDetailRatePerRoom();" onkeypress="return text_OnKeyPress_NumberOnlyAndDot();"/> 
		                        	</td>
		                        	<td class="td-topic"><s:label key="reserve.room.detail.totalamount" /></td>
		                        	<td>
		                        		<s:textfield id="totalAmount" name="reserveDetailVO.totalAmount" cssClass="iDR" readonly="true" size="10"/>
		                        	</td>
		                        </tr>
		                        <tr bgcolor="#FFFFFF">
		                        	<td colspan="4" style="padding-left: 9px">
		                        		<s:label key="reserve.room.detail.numofadult" /> &nbsp;
		                        		<s:textfield id="numOfAdult" name="reserveDetailVO.numOfAdult" size="2" maxlength="2" onkeypress="return text_OnKeyPress_NumberOnly();"
		                        					 cssStyle="text-align: center; border: 0px solid #FFFFFF; border-bottom: 1px solid #222222" />
		                        		&nbsp; &nbsp; 
		                        		<s:label key="reserve.room.detail.numofchild" /> &nbsp;
		                        		<s:textfield id="numOfChild" name="reserveDetailVO.numOfChild" size="2" maxlength="2" onkeypress="return text_OnKeyPress_NumberOnly();"
		                        					 cssStyle="text-align: center; border: 0px solid #FFFFFF; border-bottom: 1px solid #222222"/>
		                        	</td>
		                        </tr>
		                        <tr bgcolor="#FFFFFF">
		                        	<td colspan="4" style="padding-left: 9px">
		                        		<s:label key="reserve.room.detail.breakfast" />
		                        		<%--s:checkbox id="breakfast" name="reserveDetailVO.breakfast" value="1"/--%>
		                        		&nbsp;
		                        		<s:if test="reserveDetailVO.breakfast == 1">
			                        		<input type="checkbox" id="breakfast" name="reserveDetailVO.breakfast" value="1" checked="checked"/>
		                        		</s:if>
		                        		<s:else>
		                        			<input type="checkbox" id="breakfast" name="reserveDetailVO.breakfast" value="1" />
		                        		</s:else>
		                        		&nbsp;
		                        		<s:textfield id="breakfastCoupon" name="reserveDetailVO.breakfastCoupon" cssClass="iNL" size="10"/>
		                        	</td>
		                        </tr>
		                        <tr bgcolor="#FFFFFF">
		                        	<td class="td-topic"><s:label key="reserve.room.detail.remark" /></td>
		                        	<td colspan="3">			                        		
		                        		<s:textfield id="remark" name="reserveDetailVO.remark" cssClass="iNL" size="50"/>
		                        	</td>
		                        </tr>
		                        </table>
                        	</td>
                        	<td align="center" valign="top" width="45%" style="padding: 9px">
								<div style="height:300px; width:450px; padding-top: 5px; overflow:scroll;">                        	
                        		<table width="100%">
                       			<tr>
                       				<td style="color: #FFFFFF"><b>Item per Room</b></td>
                       				<td align="right">
                       					<input type="button" value="Add" onclick="javascript:addRowItem()"
                           					   style="border: 1px solid #222222; width: 32; height: 20">
                       				</td>
                       			</tr>
                        		</table>
                        		<table cellspacing="1" bgcolor="#AAAAAA" width="100%">
                       			<tr bgcolor="#FFFFFF" style="background-image: url('images/gradtblhdr.gif')">
                       				<td align="center"><s:label key="reserve.room.detail.link.del" /></td>
									<td align="center"><s:label key="reserve.room.detail.item.no" /></td>
                       				<td align="center"><s:label key="reserve.room.detail.item.name" /></td>
                       				<td align="center"><s:label key="reserve.room.detail.item.qty" /></td>
                       				<td align="center"><s:label key="reserve.room.detail.item.price" /></td>
                       				<td align="center"><s:label key="reserve.room.detail.item.amount" /></td>
                       			</tr>
								<tbody id="itemTable">		
								<s:iterator value="reserveDetailVO.itemList" status="rows">
								<tr>	
									<td align="center"><a onclick="delRowItem(this)"><img src="./images/calendar/close.gif" /></a></td>
									<td><s:property value="#rows.index+1" /></td>
									<td align="center">
				                        <s:select name="colItemId" list="%{itemList}" value="itemId"
				                                  listKey="key" listValue="value" />
									</td>
									<td align="center">
										<input type='text' size="5" maxlength="5" name="colItemQty" class="iNL" value='<s:property value="itemQty"/>' onchange="setDetailItemIndex(this);validateDetailItemQty()" onkeypress="return text_OnKeyPress_NumberOnly();"/>
									</td>
									<td align="center">
										<input type='text' size="7" maxlength="10" name="colUnitPrice" class="iNR" value='<s:property value="unitPrice"/>' onchange="setDetailItemIndex(this);validateDetailUnitPrice()" onkeypress="return text_OnKeyPress_NumberOnlyAndDot();"/>
									</td>
									<td align="center">
										<input type='text' size="7" name="colTotalAmount" class="iDR" value='<s:property value="totalAmount"/>' />
									</td>
                      				</tr>
								</s:iterator>
                       			</tbody>
								<tr class="tHead">
									<td colspan="5" align="right"><s:label key="reserve.room.detail.item.total" /></td>
									<td align="right"><span id="grandDetailTotalAmount"><s:property value="reserveDetailVO.grandTotalAmount" /></span></td>
								</tr>
                        		</table>
                        		</div>
                        	</td>
                        </tr>
						<tr style="display:none;">
						    <td id="templateItemId">
						        <s:select name="colItemId" list="%{itemList}" listKey="key" listValue="value" onchange="setDetailItemIndex(this);validateDetailItemId()"/>
						    </td>
						</tr>				
                        <tr>
                        	<td colspan="2" align="center" style="padding-top: 10px">
								<s:label key="reserve.error.qtymorethanzero" id="msgQtyMorethanZero" cssStyle="display:none;"/>
								
	                        	<s:hidden id="serviceHeaderId" name="reserveDetailVO.serviceHeaderId" />
	                        	<s:hidden id="serviceDetailId" name="reserveDetailVO.serviceDetailId" />
	                        	<s:hidden name="reserveDetailVO.serviceStatus" />
	                        	<s:hidden name="flagSave" id="flagSave"/>
	                        	
	                        	<%-- start criterai --%>
	                        	<s:hidden name="serviceDetailId" />
	                        	<s:hidden name="roomId" />
	                        	<s:hidden name="dateGen" />
	                        	<s:hidden name="groupId" />
	                        	<%--end criteria --%>
	                        	
			                    <sx:submit showLoadingText="false" indicator="reserveDetailIndicator" id="btnRefreshReserveDetail"
			                       		   formId="frmReserveDetail" executeScripts="true" targets="reserveDetailDIV" href="reserveDetail_execute"
			                       		   cssStyle="display:none;" />
								<sx:submit key="reserve.room.detail.button.ok" indicator="reserveDetailIndicator" id="btnSaveDetail" 
								   		   targets="reserveDetailDIV" href="reserveDetail_save.action" beforeNotifyTopics="/beforeSaveReserveDetail"
								   		   cssStyle="border: 1px solid #222222; width: 65px" />
								&nbsp; &nbsp;
								<input type="button" value="<s:text name="reserve.room.detail.button.cancel" />" onclick="window.close()"
									   style="border: 1px solid #222222; width: 65px" />
								<img id="reserveDetailIndicator" src="${pageContext.request.contextPath}/images/indicator.gif" alt="Loading..." style="display:none"/>
                        	</td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </s:form>
<%
    session.setAttribute("S_DATE_FIELDS", "'serviceDetailStartDate','serviceDetailEndDate'");
%>
<s:url id="hiddenCalendarURL" value="hiddenCalendar.action?" />
<sx:div id="hiddenCalendarDIV" autoStart="false" parseContent="true" executeScripts="true"
        separateScripts="true" showLoadingText="false"
        href="%{hiddenCalendarURL}" refreshOnShow="true"></sx:div>

<s:url id="refreshReserveInfoRoomURL" value="refreshReserveInfoRoom.action?" />
<sx:div id="refreshReserveInfoRoomDIV" autoStart="false" parseContent="true" executeScripts="true"
        separateScripts="true" showLoadingText="false"
        href="%{refreshReserveInfoRoomURL}" refreshOnShow="true"></sx:div>        
        
</sx:div>
